<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in goodslist"
          :key="item.id"
          @click="goodDetail(item.id)"
        >
          <van-image :src="item.img_url" />
          <p>{{ item.title }}</p>
          <div class="info_box">
            <div>
              <span>￥{{ item.sell_price }}</span>
              ￥<s>{{ item.market_price }}</s>
            </div>
            <div>
              <span>热卖中</span>
              <span>剩余{{ item.stock_quantity }}</span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前页码
      pageindex: 1,
      // 商品列表
      goodslist: [],
      isLoading: false,
      loading: false,
      finished: false
    }
  },
  created() {},
  methods: {
    // 获取商品列表
    async getGoodsList() {
      const { data: res } = await this.$http.get(
        `/api/getgoods?pageindex=${this.pageindex}`
      )
      if (res.status !== 0) {
        return this.$toast('服务器异常!')
      }
      this.goodslist = res.message
    },
    // 下拉加载
    onRefresh() {
      this.pageindex = 1
      this.finished = false
      setTimeout(() => {
        this.getGoodsList()
        this.$toast('刷新成功')
        this.isLoading = false
      }, 700)
    },
    // 触底加载
    onLoad() {
      setTimeout(async () => {
        const { data: res } = await this.$http.get(
          `/api/getgoods?pageindex=${this.pageindex}`
        )
        if (res.status !== 0) {
          return this.$toast('服务器异常!')
        }
        if (res.message.length === 0) {
          this.finished = true
        } else {
          this.goodslist = this.goodslist.concat(res.message)
          this.pageindex++
        }
        this.loading = false
      }, 700)
    },
    // 跳转至商品详情
    goodDetail(id) {
      this.$router.push('/goods/detail/' + id)
    }
  }
}
</script>

<style lang="less" scoped>
.van-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 5px 10px;
  .van-cell {
    width: 48%;
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 0;
    .van-image {
      padding: 10px;
      min-height: 180px;
    }
    .van-cell__value--alone {
      text-align: center;
      > p {
        font-size: 14px;
        color: #000;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 4px 10px;
        height: 49px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
      }
    }
    .info_box {
      box-sizing: border-box;
      padding: 5px 10px;
      width: 100%;
      background-color: #eee;
      div:first-of-type {
        text-align: left;
        span {
          margin-right: 15px;
          font-size: 16px;
          color: red;
        }
      }
      div:last-of-type {
        display: flex;
        justify-content: space-between;
        span:first-of-type {
          text-align: left;
        }
        span:last-of-type {
          text-align: right;
        }
      }
    }
  }
}
</style>
